<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流布局</title>
    <style>
        #container {
            /*display: flex;*/
        }

        #container > div {
            width: 130px;
            border: 1px solid black;
            float: left;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
<div style="height: 100px"></div>
<div id="container">
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div><div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG2.JPG">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
    <div>
        <img src="assets/IMG1.png">
    </div>
</div>
<script>
    window.onload = () => {
        const windowWidth = document.querySelector('#container').offsetWidth
        const imgWidth = document.querySelector('img').offsetWidth

        // 判断第一行到底放置了多少个图片
        const num = Math.floor(windowWidth / imgWidth)
        const childs = document.querySelector('#container').children

        const heights = []
        for (let i = 0; i < childs.length; i++) {
            // 第一行，
            if (i < num) {
                // 这里的offsetHeight需要判断， 上面是否还有内容， 要将上面空出来的高度， 加在这里， 否则， 拿到的是从顶部开始的。
                heights.push(childs[i].offsetHeight+100)
                console.log(heights)
            } else {
                // 不是第一行的
                const obj = {
                    minH: heights[0],
                    minIndex: 0
                }
                for (let j = 0; j < heights.length; j++) {
                    // 找到最小的那个， 一开始是第一行， 后来就是全部的了
                    if (heights[j] < obj.minH) {
                        obj.minH = heights[j]
                        obj.minIndex = j
                    }
                }
                console.log(obj)
                console.log(heights)
                // 从第二行开始的第一张图片放置位置， 都设置为绝对定位， 然后， 将图片放进去。
                childs[i].style.position = 'absolute'
                childs[i].style.left = childs[obj.minIndex].offsetLeft + 'px'
                childs[i].style.top = obj.minH + 'px'
                heights[obj.minIndex] = heights[obj.minIndex] + childs[i].offsetHeight
            }
        }
    }
</script>
</body>
</html>
